<template>
    <el-dropdown :hide-on-click="false" style="margin: 0 10px;" trigger="click">
        <el-button title="过滤表头">
            <el-icon :size="18">
                <Grid />
            </el-icon>
        </el-button>
        <template #dropdown>
            <el-dropdown-menu>
                <el-checkbox-group v-model="selectTitle" size="small" @change="checkboxChange">
                    <el-dropdown-item v-for="item in showTitle" :key="item.prop">
                        <el-checkbox :label="item.label" :value="item.prop" />
                    </el-dropdown-item>
                </el-checkbox-group>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>

<script setup lang="ts">
import {ref,computed} from "vue"


const tableProp:any = defineModel('tableProp')

const showTitle = computed(() => {
  
  return tableProp.value.propsList.filter(it => it.label != "操作")
})

const selectTitle = ref<any>([])
onMounted(()=>{
  selectTitle.value = tableProp.value.propsList.filter(it => it.hidden && it.label != "操作").map(item => item.prop)

})
const checkboxChange = (val: string[]) => {
  // 进入的 全部为 true 没有的为false
  tableProp.value.propsList = tableProp.value.propsList.map((item: any) => {

    if (val.includes(item.prop)) {
      return {
        ...item,
        hidden: true
      }
    } else if (item.label == "操作") {
      return {
        ...item,
        hidden: true
      }
    } else {
      return {
        ...item,
        hidden: false
      }
    }
  })
}
</script>

<style scoped></style>